<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="./../include/stdlib.jspf" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="include/meta.jspf" %>
    <title>用户绑定</title>
    <link rel="stylesheet" href="${root}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${root}/static/assets/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="${root}/static/wechat/css.css">
    <link rel="stylesheet" href="${root}/static/wechat/poster_index.css">
</head>
<body style="background-color: #f6f6f6">
<c:choose>
    <c:when test="${wxUser != null && true == success}">
        <div class="poster" style="margin-top: 20px;">
            <div style="text-align: center;">
                <i class="icon icon-ok" style="color: green;">完成绑定</i>
            </div>
            <div>
                <label>姓名：</label>
                    ${wxUser.realName}
            </div>
            <div>
                <label>联系电话：</label>
                    ${wxUser.phone}
            </div>
            <div>
                <label>公司名称：</label>
                    ${wxUser.organization.name}
            </div>
            <div>
                <label>公司地址：</label>
                    ${wxUser.organization.address}
            </div>
            <div>
                <label>公司电话：</label>
                    ${wxUser.organization.contact}
            </div>
            <c:choose>
                <c:when test="${wxUser.role=='AD_COMPANY'}">
                    <div>
                        <label>公司类型：</label>
                        广告公司
                    </div>
                    <div>
                        <label>联系人：</label>
                            ${wxUser.organization.contactName}
                    </div>
                    <div>
                        <label>营业执照：</label>
                            ${wxUser.organization.licence}
                    </div>
                </c:when>
                <c:when test="${wxUser.role=='SUPERVISION_DEPT'}">
                    <div>
                        <label>部门类型：</label>
                        监管部门
                    </div>
                </c:when>
                <c:when test="${wxUser.role=='INSURANCE_COMPANY'}">
                    <div>
                        <label>公司类型：</label>
                        保险公司
                    </div>
                </c:when>
            </c:choose>

        </div>
    </c:when>
    <c:otherwise>
        <c:if test="${false == success}">
            <div style="text-align: center;margin-top: 20px;">
                <i class="icon icon-remove" style="color:red;">${msg}</i>
            </div>
        </c:if>
        <div class="poster" style="margin-top: 20px;">
            <form id="binding_form" action="wechat/bind" method="post">
                <div class="poster_company">
                    <label>公司类型</label>
                    <ul>
                        <li class="poster_company_o">请选择公司/部门类型</li>
                        <li class="poster_company_t" data-type="AD_COMPANY">广告公司</li>
                        <li class="poster_company_t" data-type="SUPERVISION_DEPT">监管部门</li>
                        <li class="poster_company_t" data-type="INSURANCE_COMPANY">保险公司</li>
                    </ul>
                    <input type="hidden" id="role" name="role" value=""/>
                </div>
                <div>
                    <label for="company">公司名字</label>
                    <input type="text" id="company" placeholder="请输入公司名字"/>
                    <input type="hidden" id="company_id" name="orgId" value=""/>
                </div>
                <div>
                    <label>真实姓名</label>
                    <input type="text" id="realName" name="realName" placeholder="请输入真实姓名">
                </div>
                <div>
                    <label>联系电话</label>
                    <input type="text" id="phone" name="phone" placeholder="请输入联系电话">
                </div>
                <input type="hidden" name="openId" value="${openId}">
            </form>
        </div>
        <div class="poster_but">
            <input id="bind" type="button" value="绑定">
        </div>
    </c:otherwise>
</c:choose>
</body>
<%@include file="include/script.jspf" %>
<script src="${root}/static/js/bootstrap3-typeahead.min.js"></script>
<script src="${root}/static/js/bootstrap.autocomplete.js"></script>
<script src="${root}/static/js/jquery.validate.min.js"></script>
<script src="${root}/static/js/form-validation-script.js"></script>
<script>
    $(function () {
        $(".poster_company_t").click(function () {
            var idx = $(this).index() - 1;
            $(".poster_one").eq(idx).show();
            $(".poster_one").not($(".poster_one").eq(idx)).hide();
            $("#role").val($(this).data("type"));
        });
        $(".poster_one").eq(0).show();
        $(".poster_company_o").click(function () {
            $(".poster_company_t").toggle()
            $(this).toggleClass("poster_company_cl")
        });
        $(".poster_company_t").click(function () {
            $(".poster_company_t").toggle();
            $(".poster_company_o").removeClass("poster_company_cl")
            var ht = $(this).text();
            $(".poster_company_o").text(ht)
        });

        $('#company').autocomplete({
            source: function (query, process) {
                var matchCount = 20;
                if ($("#role").val() == "") {
                    alert('请先选择组织类型');
                    $("#company").val("");
                    return;
                }
                request.authPost("resources/common/autoComplete", {
                    "str": query,
                    "type": $("#role").val(),
                    "top": matchCount
                }, function (respData) {
                    console.log(respData);
                    if (!respData || respData.length == 0) {
                        // alert('输入的公司名称不存在');
                        $("#company").attr("real-value", "");
                    }
                    return process(respData);
                });
            },
            formatItem: function (item) {
                return item["name"];
            },
            setValue: function (item) {
                return {'data-value': item["name"], 'real-value': item["id"]};
            }
        });

        $("#bind").click(function () {
            $("#company_id").val($("#company").attr("real-value"));
            if ("" == $("#role").val()) {
                alert("请选择组织类型");
            } else if ("" == $("#company").val() || "" == $("#company_id").val()) {
                alert("请输入公司名称");
            } else if ("" == $("#realName").val()) {
                alert("请输入真实姓名");
            } else if ("" == $("#phone").val()) {
                alert("请输入电话号码");
            } else {
                $("#binding_form").submit();
            }
        });
    });
</script>
</html>
